Vue.component('myheader',{
    props:["arr"], //自定义模板组件中只能访问这里声明过的变量
    template: `
        <header class="container">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <img alt="Brand" src="images/logo.png">
                        </a>
                    </div>
                    <!--分类开始-->
                    <ul class="nav navbar-nav">
                        <li><a href="/">首页</a></li>
                        <!--此处的arr是无法直接访问到Vue对象里面的arr数组,
                        需要做一个传值操作  -->
                        <li v-for="c in arr"><a :href="'/index.html?cid='+c.id">{{c.name}}</a></li>
                        <li>
                            <form action="">
                                <input v-model="wd" type="text" placeholder="Search">
                                <button type="button" @click="search()"><i class="fa fa-search"></i></button>
                            </form>
                        </li>
                    </ul>
                    <!--分类结束-->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#" @click="admin()">管理员入口</a></li>
                    </ul>
                </div>
            </nav>
        </header>
    `,
    data:function () {
        return {wd:""}
    },
    methods:{
        search:function () {
            //跳转到首页  并且传递过去搜索的关键字
            location.href="/index.html?wd="+this.wd;
        },
        admin:function () {
            //发请求检查是否登录过
            axios.get("/checkLogin").then(function (response) {
                if (response.data==""){//未登录
                    location.href="/login.html";
                }else{//登录过
                    location.href = "/admin.html";
                }
            })
        }
    }
})


let header_v = new Vue({
    el:"myheader",
    data:{
        arr:[]
    },
    created:function () {
    //发请求获取所有分类信息
    axios.get("/category/select").then(function (response) {
        //this.arr访问的是当前自定义模板组件data里面的arr数组变量
        header_v.arr = response.data;
    })
}
})